import React, { PureComponent, createRef } from 'react'
import PropTypes from "prop-types"
import { Form, Select, Input } from "antd"
/**
 * 添加分类的form组件
 */
const Item = Form.Item;
const Option = Select.Option
export default class UserForm extends PureComponent {
    constructor(props) {
        super(props);
        // 创建一个 ref
        this.formRef = createRef();
    }

    //对props的值进行限制
    static propTypes = {
        setForm: PropTypes.func.isRequired,    //用来传递form对象实例的函数
        roles: PropTypes.array.isRequired,
        user: PropTypes.object
    }

    setValues = () => {
        const formInstance = this.formRef.current;
        const user = this.props.user || {}
        if (formInstance) {
            formInstance.setFieldsValue({
                username: user.username,
                password: user.password,
                email: user.email,
                phone: user.phone,
                role_id: user.role_id
            });
        }
    }
    //放在update生命周期的里面更新form的表单的数据
    componentDidUpdate() {
        this.setValues()
    }

    componentDidMount() {
        const formInstance = this.formRef.current;
        if (formInstance) {
            //将form对象通过setForm()传递父组件
            this.props.setForm(formInstance)
        }
    }

    render() {
        const { roles } = this.props;
        const user = this.props.user || {}
        return (
            <Form name="addForm" style={{ maxWidth: 360 }} ref={this.formRef}
                initialValues={{
                    username: user.username,
                    password: user.password,
                    phone: user.phone,
                    email: user.email,
                    role_id: user.role_id,
                }}>
                <Item label="用户名" name="username" rules={[
                    {
                        required: true,
                        message: '请输入用户的名称!',
                    },
                ]} >
                    <Input placeholder='请输入用户的名称'></Input>
                </Item>
                {user._id ? null : <Item label="密码" name="password" rules={[
                    {
                        required: true,
                        message: '请输入用户的密码!',
                    },
                ]} >
                    <Input type="password" placeholder='请输入用户的密码'></Input>
                </Item>}
                <Item label="手机号" name="phone" rules={[
                    {
                        required: true,
                        message: '请输入手机号!',
                    },
                ]} >
                    <Input type="text" placeholder='请输入手机号'></Input>
                </Item>
                <Item label="邮箱" name="email" rules={[
                    {
                        required: true,
                        message: '请输入邮箱!',
                    },
                ]} >
                    <Input type="text" placeholder='请输入邮箱'></Input>
                </Item>
                <Item label="角色" name='role_id' rules={[
                    {
                        required: true,
                        message: '请选择需要的角色!',
                    },
                ]}>
                    <Select placeholder="请选择角色">
                        {
                            roles.map(role => <Option key={role._id} value={role._id}>{role.name}</Option>)
                        }
                    </Select>
                </Item>
            </Form>
        )
    }
}


